<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
    <style></style>
  </head>

  <body>
    <!-- 
      v-bind强制绑定
        * 基础使用
          - `v-bind`:vue中提供的用于对模板中的属性进行强制绑定的指令
          - `v-bind`指令后的属性值区域就是插值语法区域
          - `v-bind:attr="xxx"`:给attr属性强制绑定xxx数据
          - `v-bind`可以简写为一个 :(冒号),比如`:attr="xxx"`
        * 动态类名:写法为: :class="xxx" xxx可以是字符串、对象、数组。
          - 字符串写法适用于：类名不确定是否添加,可以使用三元判断控制展示的是哪些字符串格式的类名(常用一个类名的操作)
          - 对象写法适用于：要绑定多个类名个数确定，类名也确定，但不确定用不用
          - 数组写法适用于：要绑定的样式，个数不确定、类名也不确定
        * 动态style:
          - v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。
          - CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名`<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>`
          - `style="arr"`:arr可以是包含样式对象的数组。当有多个样式对象的时候,可以使用数组整合


     -->
    <div id="app">
      <button @click="isEnter=!isEnter">切换状态</button>

      <div :style="{background: 'red', fontSize: '20px'}">
        style动态绑定的基础写法-style的插值区域接受一个对象作为值
      </div>

      <div :style="{background: isEnter?'red':'green', fontSize: '20px'}">
        style动态绑定:把对象的值通过数据来进行控制
      </div>

      <div :style="[divStyle1,divStyle2]">
        style动态绑定:如果有多个对象,可以放在一个数组中
      </div>
    </div>
    <script>
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            isEnter: true,
            divStyle1: {
              background: "green",
              fontSize: "20px",
            },
            divStyle2: { fontStyle: "italic" },
          };
        },
      });
    </script>
  </body>
</html>
